<template>
  <div id="mouse-position"></div>
</template>

<script setup>
onMounted(() => {
  // 注入map
  const $map = inject('$map')

  // 缩放至 控件
  var navControl = new ol.control.ZoomToExtent({
    extent: [113.9509, 33.5681, 113.9769, 33.5791],
  })
  $map.addControl(navControl)

  // 全屏 控件
  var fullControl = new ol.control.FullScreen({})
  $map.addControl(fullControl)

  //显示鼠标位置控件
  var mousePositionControl = new ol.control.MousePosition({
    //坐标格式
    coordinateFormat: ol.coordinate.createStringXY(4),
    //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标)
    projection: 'EPSG:4326',
    //坐标信息显示样式类名,默认是'ol-mouse-position'
    className: 'custom-mouse-position',
    //显示鼠标位置信息的目标容器
    target: document.getElementById('mouse-position'),
    //未定义坐标的标记
    undefinedHTML: '&nbsp;',
  })
  $map.addControl(mousePositionControl)

  // 漫游事件
  $map.on('click', function (evt) {
    // view
    const view = $map.getView()
    // zoom
    const zoom = view.getZoom()
    var coordinate = evt.coordinate
    view.animate({
      center: coordinate,
      zoom,
      duration: 500,
    })
  })
})
</script>

<style>
#mouse-position {
  position: fixed;
  bottom: 0vh;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: 200px;
  border-radius: 15px;
  color: #fff;
  background-color: rgba(126, 155, 191, 0.7);
  align-content: center;
  justify-items: center;
}
.ol-full-screen-false {
  position: fixed;
  top: 3vh;
  right: 2vw;
  background-color: rgba(126, 155, 191, 0.7);
}
</style>
